<template>
  <div class="pagination-example">
    <el-card>
      <div slot="header">
        <span class="page-title">ConfigurableTable 分页功能示例</span>
      </div>

      <!-- 示例 1: 基础用法（默认带序号列） -->
      <div class="example-section">
        <h3>示例 1: 基础用法（默认带序号列）</h3>
        <p class="description">默认显示序号列，支持分页后序号连续</p>

        <configurable-table
          :columns="basicColumns"
          :data="basicData"
          :loading="basicLoading"
          :show-pagination="true"
          :current-page.sync="basicPagination.current"
          :page-size.sync="basicPagination.size"
          :pagination-total="basicPagination.total"
          @page-change="loadBasicData"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;!-- 默认显示序号列 --&gt;
&lt;configurable-table
  :columns="tableColumns"
  :data="tableData"
  :loading="loading"
  :show-pagination="true"
  :current-page.sync="pagination.current"
  :page-size.sync="pagination.size"
  :pagination-total="pagination.total"
  @page-change="loadData"
  border
  stripe&gt;
&lt;/configurable-table&gt;</code></pre>
        </div>
      </div>

      <!-- 示例 2: 隐藏序号列 -->
      <div class="example-section">
        <h3>示例 2: 隐藏序号列</h3>
        <p class="description">通过 :show-index="false" 隐藏序号列</p>

        <configurable-table
          :columns="basicColumns"
          :data="noIndexData"
          :loading="noIndexLoading"
          :show-pagination="true"
          :current-page.sync="noIndexPagination.current"
          :page-size.sync="noIndexPagination.size"
          :pagination-total="noIndexPagination.total"
          :show-index="false"
          @page-change="loadNoIndexData"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;!-- 隐藏序号列 --&gt;
&lt;configurable-table
  :columns="tableColumns"
  :data="tableData"
  :show-index="false"
  :show-pagination="true"
  :current-page.sync="pagination.current"
  :page-size.sync="pagination.size"
  :pagination-total="pagination.total"
  @page-change="loadData"
  border
  stripe&gt;
&lt;/configurable-table&gt;</code></pre>
        </div>
      </div>

      <!-- 示例 3: 自定义序号列 -->
      <div class="example-section">
        <h3>示例 3: 自定义序号列样式</h3>
        <p class="description">可自定义序号列的标题、宽度、对齐方式、是否固定</p>

        <configurable-table
          :columns="basicColumns"
          :data="customIndexData"
          :loading="customIndexLoading"
          :show-pagination="true"
          :current-page.sync="customIndexPagination.current"
          :page-size.sync="customIndexPagination.size"
          :pagination-total="customIndexPagination.total"
          index-label="编号"
          index-width="80"
          index-fixed="left"
          index-align="center"
          @page-change="loadCustomIndexData"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;!-- 自定义序号列 --&gt;
&lt;configurable-table
  :columns="tableColumns"
  :data="tableData"
  :show-pagination="true"
  :current-page.sync="pagination.current"
  :page-size.sync="pagination.size"
  :pagination-total="pagination.total"
  index-label="编号"
  index-width="80"
  index-fixed="left"
  index-align="center"
  @page-change="loadData"
  border
  stripe&gt;
&lt;/configurable-table&gt;

&lt;!-- 序号列配置说明 --&gt;
&lt;!--
  show-index: 是否显示序号列，默认 true
  index-label: 序号列标题，默认 '序号'
  index-width: 序号列宽度，默认 '60'
  index-fixed: 是否固定序号列，可选 'left' | 'right' | false（默认）
  index-align: 序号列对齐方式，默认 'center'
--&gt;</code></pre>
        </div>
      </div>

      <!-- 示例 4: 前端分页 -->
      <div class="example-section">
        <h3>示例 4: 前端分页（带序号）⭐️</h3>
        <p class="description">适用于小数据量场景，组件内部自动切片显示，序号连续</p>

        <configurable-table
          :columns="basicColumns"
          :data="frontendAllData"
          :loading="false"
          :show-pagination="true"
          :current-page.sync="frontendPagination.current"
          :page-size.sync="frontendPagination.size"
          pagination-mode="frontend"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;configurable-table
  :columns="tableColumns"
  :data="allData"
  :loading="loading"
  :show-pagination="true"
  :current-page.sync="pagination.current"
  :page-size.sync="pagination.size"
  pagination-mode="frontend"
  border
  stripe&gt;
&lt;/configurable-table&gt;

data() {
  return {
    // 传入全部数据，组件内部自动切片
    allData: [
      { id: 1, name: '张三', age: 25 },
      { id: 2, name: '李四', age: 28 },
      // ... 更多数据
    ],
    pagination: {
      current: 1,
      size: 10,
      total: 0  // 前端分页模式下不需要 total
    }
  }
}

// 前端分页模式特点：
// 1. 传入全部数据到 :data
// 2. 设置 pagination-mode="frontend"
// 3. 不需要监听 @page-change 事件
// 4. 不需要设置 paginationTotal
// 5. 组件自动根据 currentPage 和 pageSize 切片显示</code></pre>
        </div>
      </div>

      <!-- 示例 5: 后端分页（默认） -->
      <div class="example-section">
        <h3>示例 5: 后端分页（默认）</h3>
        <p class="description">适用于大数据量场景，每次切换分页都调用接口获取数据</p>

        <configurable-table
          :columns="basicColumns"
          :data="backendData"
          :loading="backendLoading"
          :show-pagination="true"
          :current-page.sync="backendPagination.current"
          :page-size.sync="backendPagination.size"
          :pagination-total="backendPagination.total"
          @page-change="loadBackendData"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;configurable-table
  :columns="tableColumns"
  :data="tableData"
  :loading="loading"
  :show-pagination="true"
  :current-page.sync="pagination.current"
  :page-size.sync="pagination.size"
  :pagination-total="pagination.total"
  @page-change="loadData"
  border
  stripe&gt;
&lt;/configurable-table&gt;

data() {
  return {
    pagination: {
      current: 1,
      size: 10,
      total: 0
    }
  }
},
methods: {
  loadData() {
    // 分页参数会自动通过 .sync 更新
    console.log('当前页:', this.pagination.current)
    console.log('每页条数:', this.pagination.size)
    // 调用API获取数据
  }
}</code></pre>
        </div>
      </div>

      <!-- 示例 6: 自定义分页布局 -->
      <div class="example-section">
        <h3>示例 6: 自定义分页布局</h3>
        <p class="description">自定义分页组件的显示元素和顺序</p>

        <configurable-table
          :columns="basicColumns"
          :data="customLayoutData"
          :loading="customLayoutLoading"
          :show-pagination="true"
          :current-page.sync="customLayoutPagination.current"
          :page-size.sync="customLayoutPagination.size"
          :pagination-total="customLayoutPagination.total"
          pagination-layout="prev, pager, next, jumper, ->, total"
          @page-change="loadCustomLayoutData"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;configurable-table
  ...
  :show-pagination="true"
  pagination-layout="prev, pager, next, jumper, ->, total"
  @page-change="loadData"&gt;
&lt;/configurable-table&gt;

// 可用的布局元素：
// - sizes: 每页条数选择器
// - prev: 上一页按钮
// - pager: 页码列表
// - next: 下一页按钮
// - jumper: 跳转输入框
// - total: 总条数
// - ->: 右对齐分隔符</code></pre>
        </div>
      </div>

      <!-- 示例 7: 自定义每页条数选项 -->
      <div class="example-section">
        <h3>示例 7: 自定义每页条数选项</h3>
        <p class="description">自定义每页显示条数的可选项</p>

        <configurable-table
          :columns="basicColumns"
          :data="customSizesData"
          :loading="customSizesLoading"
          :show-pagination="true"
          :current-page.sync="customSizesPagination.current"
          :page-size.sync="customSizesPagination.size"
          :pagination-total="customSizesPagination.total"
          :page-sizes="[5, 15, 30, 50]"
          @page-change="loadCustomSizesData"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;configurable-table
  ...
  :show-pagination="true"
  :page-sizes="[5, 15, 30, 50]"
  @page-change="loadData"&gt;
&lt;/configurable-table&gt;</code></pre>
        </div>
      </div>

      <!-- 示例 8: 带背景色的分页 -->
      <div class="example-section">
        <h3>示例 8: 带背景色的分页</h3>
        <p class="description">分页按钮添加背景色</p>

        <configurable-table
          :columns="basicColumns"
          :data="backgroundData"
          :loading="backgroundLoading"
          :show-pagination="true"
          :current-page.sync="backgroundPagination.current"
          :page-size.sync="backgroundPagination.size"
          :pagination-total="backgroundPagination.total"
          :pagination-background="true"
          @page-change="loadBackgroundData"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;configurable-table
  ...
  :show-pagination="true"
  :pagination-background="true"
  @page-change="loadData"&gt;
&lt;/configurable-table&gt;</code></pre>
        </div>
      </div>

      <!-- 示例 9: 自定义分页样式 -->
      <div class="example-section">
        <h3>示例 9: 自定义分页样式</h3>
        <p class="description">自定义分页容器的位置和样式</p>

        <configurable-table
          :columns="basicColumns"
          :data="customStyleData"
          :loading="customStyleLoading"
          :show-pagination="true"
          :current-page.sync="customStylePagination.current"
          :page-size.sync="customStylePagination.size"
          :pagination-total="customStylePagination.total"
          pagination-class="custom-pagination"
          :pagination-style="{ marginTop: '30px', textAlign: 'center' }"
          @page-change="loadCustomStyleData"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;configurable-table
  ...
  :show-pagination="true"
  pagination-class="custom-pagination"
  :pagination-style="{ marginTop: '30px', textAlign: 'center' }"
  @page-change="loadData"&gt;
&lt;/configurable-table&gt;</code></pre>
        </div>
      </div>

      <!-- 示例 10: 不使用分页 -->
      <div class="example-section">
        <h3>示例 10: 不使用分页（默认）</h3>
        <p class="description">当不需要分页时，只需不传 show-pagination 或设为 false</p>

        <configurable-table
          :columns="basicColumns"
          :data="noPaginationData"
          :loading="noPaginationLoading"
          border
          stripe>
        </configurable-table>

        <div class="code-block">
          <pre><code>&lt;configurable-table
  :columns="tableColumns"
  :data="tableData"
  :loading="loading"
  border
  stripe&gt;
&lt;/configurable-table&gt;

// 不传 show-pagination，默认不显示分页</code></pre>
        </div>
      </div>

      <!-- 示例 11: 监听分页事件 -->
      <div class="example-section">
        <h3>示例 11: 监听分页事件</h3>
        <p class="description">可以监听 size-change、current-change 或统一的 page-change 事件</p>

        <configurable-table
          :columns="basicColumns"
          :data="eventData"
          :loading="eventLoading"
          :show-pagination="true"
          :current-page.sync="eventPagination.current"
          :page-size.sync="eventPagination.size"
          :pagination-total="eventPagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @page-change="handlePageChange"
          border
          stripe>
        </configurable-table>

        <div class="event-log">
          <h4>事件日志：</h4>
          <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
            {{ log }}
          </div>
        </div>

        <div class="code-block">
          <pre><code>&lt;configurable-table
  ...
  :show-pagination="true"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  @page-change="handlePageChange"&gt;
&lt;/configurable-table&gt;

methods: {
  // 每页条数改变
  handleSizeChange(newSize) {
    console.log('新的每页条数:', newSize)
    this.loadData()
  },
  // 当前页改变
  handleCurrentChange(newPage) {
    console.log('新的当前页:', newPage)
    this.loadData()
  },
  // 统一的分页改变事件（推荐使用）
  handlePageChange({ currentPage, pageSize }) {
    console.log('分页参数:', currentPage, pageSize)
    this.loadData()
  }
}</code></pre>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConfigurableTable from './index.vue'

export default {
  name: 'PaginationExample',
  components: {
    ConfigurableTable
  },
  data() {
    return {
      // 基础列配置
      basicColumns: [
        { prop: 'id', label: 'ID', width: 80, align: 'center' },
        { prop: 'name', label: '姓名', minWidth: 120 },
        { prop: 'age', label: '年龄', width: 80, align: 'center' },
        { prop: 'email', label: '邮箱', minWidth: 200 },
        { prop: 'address', label: '地址', minWidth: 250 }
      ],

      // 示例 1: 基础用法（默认带序号列）
      basicData: [],
      basicLoading: false,
      basicPagination: {
        current: 1,
        size: 10,
        total: 100
      },

      // 示例 2: 隐藏序号列
      noIndexData: [],
      noIndexLoading: false,
      noIndexPagination: {
        current: 1,
        size: 10,
        total: 50
      },

      // 示例 3: 自定义序号列
      customIndexData: [],
      customIndexLoading: false,
      customIndexPagination: {
        current: 1,
        size: 10,
        total: 60
      },

      // 示例 4: 前端分页（带序号）
      frontendAllData: [],  // 将在 mounted 中生成全部数据
      frontendPagination: {
        current: 1,
        size: 10,
        total: 0
      },

      // 示例 5: 后端分页（默认）
      backendData: [],
      backendLoading: false,
      backendPagination: {
        current: 1,
        size: 10,
        total: 80
      },

      // 示例 6: 自定义布局
      customLayoutData: [],
      customLayoutLoading: false,
      customLayoutPagination: {
        current: 1,
        size: 10,
        total: 50
      },

      // 示例 7: 自定义每页条数
      customSizesData: [],
      customSizesLoading: false,
      customSizesPagination: {
        current: 1,
        size: 5,
        total: 50
      },

      // 示例 8: 带背景色
      backgroundData: [],
      backgroundLoading: false,
      backgroundPagination: {
        current: 1,
        size: 10,
        total: 70
      },

      // 示例 9: 自定义样式
      customStyleData: [],
      customStyleLoading: false,
      customStylePagination: {
        current: 1,
        size: 10,
        total: 60
      },

      // 示例 10: 不使用分页
      noPaginationData: [],
      noPaginationLoading: false,

      // 示例 11: 事件监听
      eventData: [],
      eventLoading: false,
      eventPagination: {
        current: 1,
        size: 10,
        total: 90
      },
      eventLogs: []
    }
  },
  mounted() {
    // 生成前端分页的全部数据（示例 4）
    this.generateFrontendData()

    // 初始加载后端分页数据
    this.loadBasicData()          // 示例 1
    this.loadNoIndexData()        // 示例 2
    this.loadCustomIndexData()    // 示例 3
    this.loadBackendData()        // 示例 5
    this.loadCustomLayoutData()   // 示例 6
    this.loadCustomSizesData()    // 示例 7
    this.loadBackgroundData()     // 示例 8
    this.loadCustomStyleData()    // 示例 9
    this.loadNoPaginationData()   // 示例 10
    this.loadEventData()          // 示例 11
  },
  methods: {
    // 生成前端分页的全部数据
    generateFrontendData() {
      const total = 45  // 总共 45 条数据
      this.frontendAllData = []
      for (let i = 0; i < total; i++) {
        this.frontendAllData.push({
          id: i + 1,
          name: `用户${i + 1}`,
          age: 20 + Math.floor(Math.random() * 30),
          email: `user${i + 1}@example.com`,
          address: `某省某市某区某街道${i + 1}号`
        })
      }
    },

    // 生成模拟数据
    generateMockData(page, size, total) {
      const start = (page - 1) * size
      const end = Math.min(start + size, total)
      const data = []

      for (let i = start; i < end; i++) {
        data.push({
          id: i + 1,
          name: `用户${i + 1}`,
          age: 20 + Math.floor(Math.random() * 30),
          email: `user${i + 1}@example.com`,
          address: `某省某市某区某街道${i + 1}号`
        })
      }

      return data
    },

    // 模拟异步加载
    async mockRequest(callback) {
      await new Promise(resolve => setTimeout(resolve, 500))
      callback()
    },

    // 示例 1: 基础用法
    async loadBasicData() {
      this.basicLoading = true
      await this.mockRequest(() => {
        this.basicData = this.generateMockData(
          this.basicPagination.current,
          this.basicPagination.size,
          this.basicPagination.total
        )
        this.basicLoading = false
      })
    },

    // 示例 2: 隐藏序号列
    async loadNoIndexData() {
      this.noIndexLoading = true
      await this.mockRequest(() => {
        this.noIndexData = this.generateMockData(
          this.noIndexPagination.current,
          this.noIndexPagination.size,
          this.noIndexPagination.total
        )
        this.noIndexLoading = false
      })
    },

    // 示例 3: 自定义序号列
    async loadCustomIndexData() {
      this.customIndexLoading = true
      await this.mockRequest(() => {
        this.customIndexData = this.generateMockData(
          this.customIndexPagination.current,
          this.customIndexPagination.size,
          this.customIndexPagination.total
        )
        this.customIndexLoading = false
      })
    },

    // 示例 5: 后端分页
    async loadBackendData() {
      this.backendLoading = true
      await this.mockRequest(() => {
        this.backendData = this.generateMockData(
          this.backendPagination.current,
          this.backendPagination.size,
          this.backendPagination.total
        )
        this.backendLoading = false
      })
    },

    // 示例 6: 自定义布局
    async loadCustomLayoutData() {
      this.customLayoutLoading = true
      await this.mockRequest(() => {
        this.customLayoutData = this.generateMockData(
          this.customLayoutPagination.current,
          this.customLayoutPagination.size,
          this.customLayoutPagination.total
        )
        this.customLayoutLoading = false
      })
    },

    // 示例 7: 自定义每页条数
    async loadCustomSizesData() {
      this.customSizesLoading = true
      await this.mockRequest(() => {
        this.customSizesData = this.generateMockData(
          this.customSizesPagination.current,
          this.customSizesPagination.size,
          this.customSizesPagination.total
        )
        this.customSizesLoading = false
      })
    },

    // 示例 8: 带背景色
    async loadBackgroundData() {
      this.backgroundLoading = true
      await this.mockRequest(() => {
        this.backgroundData = this.generateMockData(
          this.backgroundPagination.current,
          this.backgroundPagination.size,
          this.backgroundPagination.total
        )
        this.backgroundLoading = false
      })
    },

    // 示例 9: 自定义样式
    async loadCustomStyleData() {
      this.customStyleLoading = true
      await this.mockRequest(() => {
        this.customStyleData = this.generateMockData(
          this.customStylePagination.current,
          this.customStylePagination.size,
          this.customStylePagination.total
        )
        this.customStyleLoading = false
      })
    },

    // 示例 10: 不使用分页
    async loadNoPaginationData() {
      this.noPaginationLoading = true
      await this.mockRequest(() => {
        this.noPaginationData = this.generateMockData(1, 10, 10)
        this.noPaginationLoading = false
      })
    },

    // 示例 11: 事件监听
    async loadEventData() {
      this.eventLoading = true
      await this.mockRequest(() => {
        this.eventData = this.generateMockData(
          this.eventPagination.current,
          this.eventPagination.size,
          this.eventPagination.total
        )
        this.eventLoading = false
      })
    },

    // 事件处理
    handleSizeChange(newSize) {
      const timestamp = new Date().toLocaleTimeString()
      this.eventLogs.unshift(`[${timestamp}] size-change 事件: 每页 ${newSize} 条`)
      if (this.eventLogs.length > 10) this.eventLogs.pop()
      this.loadEventData()
    },

    handleCurrentChange(newPage) {
      const timestamp = new Date().toLocaleTimeString()
      this.eventLogs.unshift(`[${timestamp}] current-change 事件: 第 ${newPage} 页`)
      if (this.eventLogs.length > 10) this.eventLogs.pop()
      this.loadEventData()
    },

    handlePageChange({ currentPage, pageSize }) {
      const timestamp = new Date().toLocaleTimeString()
      this.eventLogs.unshift(
        `[${timestamp}] page-change 事件: 第 ${currentPage} 页，每页 ${pageSize} 条`
      )
      if (this.eventLogs.length > 10) this.eventLogs.pop()
    }
  }
}
</script>

<style scoped lang="scss">
.pagination-example {
  padding: 20px;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }

  .example-section {
    margin-bottom: 50px;

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 10px;
    }

    .description {
      color: #909399;
      font-size: 14px;
      margin-bottom: 20px;
    }

    .code-block {
      margin-top: 20px;
      background: #f5f7fa;
      border-radius: 4px;
      padding: 15px;

      pre {
        margin: 0;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        line-height: 1.6;
        color: #303133;
        overflow-x: auto;
      }

      code {
        background: transparent;
      }
    }

    .event-log {
      margin-top: 20px;
      padding: 15px;
      background: #f0f9ff;
      border: 1px solid #b3d8ff;
      border-radius: 4px;
      max-height: 200px;
      overflow-y: auto;

      h4 {
        margin: 0 0 10px 0;
        font-size: 14px;
        font-weight: 600;
        color: #409eff;
      }

      .log-item {
        font-size: 13px;
        color: #606266;
        padding: 4px 0;
        font-family: 'Courier New', monospace;
      }
    }
  }
}

// 自定义分页样式示例
::v-deep .custom-pagination {
  margin-top: 30px;
  text-align: center;

  .el-pagination {
    font-weight: 600;
  }
}
</style>

